<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Semicolon PHP course</title>


  <!--
      <link rel="stylesheet" href="style.css" type="text/css"  media="screen" />
      <script type='text/javascript' src='my_script.js' ></script>
  -->


    <style type="text/css">
        body{
        padding:0px;
        margin:0px;
        
        }
        #wrapper{
        width:960px;      
        margin:0 auto;
        padding:10px;
        }

        #content_wrapper{              
              height:auto;
        }
        
        #header{
            height:100px;            
        }

        #logo{
        float:left;
        
        }

        

        #header #logo #company{
            color:#607691;
            font-weight: bold;
            font-size:40px;
            text-transform: uppercase;
            line-height: 100px;
        }

        #company_name{
            color:#000;
            font-weight: bold;
            font-size:40px;
            text-transform: uppercase;
        }

        #header_nav{
            float:right;
            line-height: 100px;
            padding-right:106px;
        }

        #header_nav a{
            color:#607691;
            padding-right:5px;
            text-decoration: none;
        }

        .nav-spearator{
            font-size:12px;
            font-weight:bold;
        }

        
        
        #sidebar {
        float:left;
        width:250px;
        padding-left: 5px;
        color:#999;
        }

        #sidebar p{            
            padding-right: 50px;
        }

        #sidebar h2{
              color:#607691;
              border-bottom: 1px solid #99CCCC;
              width:180px;
        }

              
        
        #content{
         float:left;
         width:600px;
        }

        #content h2{
              color:#607691;
              border-bottom: 1px solid #99CCCC;
        }

        #content h3{
              color:#666;              
        }

        #footer{
            color:#999999;
            font-size:12px;    
        }
        #footer_left{
            float:left;            
        }

        #footer_right{
            float:right;
        }
        
       /* --- extra use------------- */
        .highlight{
            color:#999;
            font-weight: bold;
            font-style: italic;
        }
        .clear{
            float:none;clear:both;
        }

        #extra{
            display:none;
        }
               
    </style>

</head>

<body>
    
<div id="wrapper">    
    <div id="header">
        <div id="logo">
            <span id="company">Company</span>
            <span id="company_name">Name</span>
        </div>
        <div id="header_nav">
            <a href="#">Home</a><span class="nav-spearator"> |</span>
            <a href="#">About</a><span class="nav-spearator"> |</span>
            <a href="#">News</a><span class="nav-spearator"> |</span>
            <a href="#">Content</a> 
        </div>
         <div class="clear"> </div>
         
    </div>

    <div id="content_wrapper">
        <div id ="sidebar">
           <div class="sidebar_nav">
                <h2>Recent Works</h2>
                <ul>
                    <li>Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                </ul>
           </div>

            <div class="sidebar_nav">
                <h2>Clients</h2>
                <ul>
                    <li>Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                </ul>
           </div>

             <div class="sidebar_nav">
                <h2>About</h2>
                <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
           </div>



        </div>

        <div id="content">
            <h2>Latest News</h2>

            <div class="post">
                <h3>Lorem ipsum dolor sit amet</h3>
                <p>
                     <?php
                    echo "sample data from data base will be shown here.";
                    ?>

                    <span class="highlight">content</span>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
            </div>

                 <div class="post">
                <h3>Lorem ipsum dolor sit amet</h3>
                <p>
                     <?php
                    echo "sample data from data base will be shown here.";
                    ?>

                    <span class="highlight">content</span>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>

               
            </div>

            
            

        </div>

         <div class="clear"> </div>

        <div id="extra">
            <h2>Lorem ipsum dolor</h2>
            <p>
                <span class="highlight">content</span>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        
    </div>

    <div id="footer">
        <div id="footer_left">
            Design by Semicolon Developers
        </div>
        <div id="footer_right">
            Copyright &copy; <?php echo date("Y");?>, All right reserved
        </div>
         <div class="clear"> </div>
    </div>
    

</div>

</body>
</html>
